<style lang="scss" scoped>
    .box{
        padding:5px 10px;
        margin:5px;
        box-shadow:0 0 1px rgba(#000, .2);
        > div{
            padding:5px;
        }
    }
</style>
<template>
    <ui-main :title="$route.name">
        <h2>字体样式</h2>
        <div class="">
            <el-divider content-position="left">控制字体颜色的class（按用途）</el-divider>
            <span class="t-sub">.t-sub</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-info">.t-info</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-danger">.t-danger</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-success">.t-success</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-primary ">.t-primary</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-warning">.t-warning</span>
            <el-divider content-position="left">控制字体颜色的class（按颜色）</el-divider>
            <span class="t-red">.t-red</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-orange">.t-orange</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-olive">.t-olive</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-green">.t-green</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-teal">.t-teal</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-blue">.t-blue</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-violet">.t-violet</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-purple">.t-purple</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-pink">.t-pink</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-brown">.t-brown</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-grey">.t-grey</span>
            <el-divider direction="vertical"></el-divider>
            <span class="t-black">.t-black</span>
            <el-divider content-position="left">控制字体方向</el-divider>
            <span class="box t-l dis-i-b" style="width:300px">
                .t-l (字体靠左)
            </span>
            <span class="box t-c dis-i-b" style="width:300px">
                .t-c (字体居中)
            </span>
            <span class="box t-r dis-i-b" style="width:300px">
                .t-r (字体靠右)
            </span>
            <el-divider content-position="left">其他</el-divider>
            <div class="box required t-l dis-i-b" style="width:300px">
                .required （表格必填项目打星号）
            </div>
            <div class="box t-underline t-l dis-i-b" style="width:300px">
                .t-underline （下划线）
            </div>
            <div class="box ui-ellipsis dis-i" style="width:100%">
                .ui-ellipsis (超出长度出现省略号,超出长度出现省略号,超出长度出现省略号,超出长度出现省略号,)
            </div>
        </div>
        <h2>布局</h2>
        <div class="ui flex ">
            <div class="box w-20p ">
                <div>.of-h // overflow:hidden</div>
                <div>.of-a // overflow:auto</div>
                <div>.pos-r // position:relative</div>
                <div>.pos-a // position:absolute</div>
                <div>.dis-i // display:inline</div>
                <div>.dis-i-b // display:inline-block</div>
                <div>.dis-b // display:block</div>
                <div>.dis-n // display:none</div>
                <div>.fl-l // float:left</div>
                <div>.fl-r // float:right</div>
                <div>.fl-n // float:inherit</div>
                <div>.vh-100 // 全屏高度</div>
            </div>
            <div class="box w-20p ">
                .ui.scrollbar // 显示滚动条 <br><br>
                .ui.scrollbar.scroll-hover // 鼠标移动到容器内才显示滚动条 <br><br>
                .ui.scrollbar.scroll-dark // 定义滚动条颜色 (dark light blue red yellow teal)
            </div>
        </div>

        <!--说明文档-->
       <!-- <div class="p-20">
            <ui-load-md no-bar file="uiinfo"></ui-load-md>
        </div>-->
    </ui-main>
</template>
